<template>
	<div ref="mgrDialog" class="dialog-wrap">
		
		<el-dialog 
			:title="title" 
			width="50%" 
			:visible.sync="DialogVisible"
			@close="dialogClose"
		>
			
			<el-row :gutter="20">
				<el-form 
					v-if = "editForm != null"
					size="mini"
					:label-width="formLabelWidth"
					:model.sync="editForm">
					
					<el-col :span="12">
						<el-form-item label="分类名称" :label-width="formLabelWidth">
		      				<el-input v-model="editForm.name" autocomplete="off"></el-input>
		    			</el-form-item>
		    		</el-col>

		    		<el-col :span="12">
						<el-form-item label="选择父类" :label-width="formLabelWidth">
		      				<el-select v-model="editForm.parentId" placeholder="请选择">
							    <el-option
							      v-for="item in gserviceCata"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
  							</el-select>
		    			</el-form-item>
		    		</el-col>
		    		
		    		<el-col :span="12">
						<el-form-item label="分类图标" :label-width="formLabelWidth">
		      				
							<!-- 添加图片按钮 -->
							<div 
								v-if="!editForm.icon" 
								class="icon-wrap" 
								@click="uploadClick">
								<i class="el-icon-circle-plus-outline"
								></i>
							</div>
							

							<el-image
								v-if="editForm.icon"
	      						style="width: 100px;height: 100px;"
	      						:src="imgPrefix+editForm.icon"
	      						fit="scale-down"
	      						@click.native="uploadClick"
	      					></el-image>

							<el-upload
            					ref="iconUpload"
								with-credentials
							  	:action="uploadUrl"
							  	style="display: none"
							  	accept="image/*"
							  	:headers="uploadHeaders"
							  	:on-change="handleUploadChange"
							>
					  			<el-button size="small" id="uploadImg" ref="uploadImg">点击上传</el-button> 
							</el-upload>

		    			</el-form-item>
		    		</el-col>

				</el-form>
			</el-row>
			
			<div slot="footer" class="dialog-footer">
				<el-button size="mini" type="primary" @click="confirm">{{ confirmText }}</el-button>
			    <el-button size="mini" type="danger" @click="cancel">取消</el-button>
			</div>	
		</el-dialog>

	</div>
</template>


<script>
import { getToken } from '@/utils/auth';
import { getList } from "@/api/admin/gservice"	
import { baseUrl } from '@/config/env';
//上传图片的url
const uploadUrl = baseUrl+'/rest/common/upload';
//获取图片的url
const imgPrefix = baseUrl+'/rest/common/preview/';



export default{
	props:{
		title:{
			type:String,
			default:'编辑'
		},
		type:{
			type:[Number,String],
			default:1
		},
		visible:{
			type:Boolean,
			default:false
		},
		form:{
			type:Object,
			default:null
		}
	},
	computed:{
		
	},
	watch:{
		form(newVal,oldVal){
			
			if(newVal != null){
				this.editForm = newVal;
			}else{
				this.editForm = this.defaultForm;
			}	
		},
		type(newVal,oldVal){
			if(newVal == 1){
				this.confirmText = '新增'
				//this.editForm = this.defaultForm;
			}else if(newVal == 2){
				this.confirmText = '修改'
				//this.editForm = this.form;
			}
		},
		visible(val){
			this.DialogVisible = val;

			//每次打开时刷新分类数据
			if(val){
				this.getGserviceList();
			}

			if(this.type == 1){
				this.editForm = this.defaultForm;
			}else if(this.type == 2){
				this.editForm = this.form;
			}
		}
	},
	data(){
		return{
			gserviceCata:[],
			editForm:{
				name:'',
				parentId:'',
				icon:''
			},
			defaultForm:{
				name:'',
				parentId:'',
				icon:''
			},
			imgPrefix:imgPrefix,
			uploadUrl:uploadUrl,
			uploadHeaders:{'Authorization':'Bearer ' + getToken()},
			DialogVisible:false,
			formLabelWidth:'100px',
			confirmText:'修改'
			
		}
	},
	mounted(){
		//this.init();
		this.getGserviceList();
	},
	methods:{
		init(){
			
			if(this.type == 1){
				//新增
				this.confirmText = '新增'
				this.editForm = this.defaultForm;
			}else if(this.type == 2){
				//编辑
				this.confirmText = '修改'
				this.editForm = this.form;
			}
		},
		getGserviceList(){
		    getList(1, 999).then(res => {
		        var result = res.data.data;
		        this.gserviceCata = result.records;
		    });		
  		},
		//取消按钮
		cancel(){

			this.$emit('btnCancel');
			this.editForm = this.defaultForm;
			this.DialogVisible = false;
		},
		confirm(){
			this.$emit('btnConfirm',this.type,this.editForm)
			this.editForm = null;
			this.DialogVisible = false;
		},
		dialogClose(){
			this.cancel();
		},
		//打开图片上传
        uploadClick(){
        	var uploadBtn = window.document.getElementById("uploadImg");
        	uploadBtn.click();
        },
		//文件状态改变
        handleUploadChange(file,fileList){
        	console.log("------文件状态改变------")
        	console.log(file)
        	console.log(fileList)
        	if(file.status == "success"){
        		console.log("------上传成功-----")
        		console.log(file)
        		this.editForm.icon = file.response.data.fileId
        	}
        },

	}
}


</script>

<style lang="scss" scoped>
	.icon-wrap{
		width: 50px;
		height: 50px;
		text-align: center;
		border-radius: 5px;
		background-color: #666666;
		i{
			color: #ffffff;
			font-size: 30px;
			line-height: 50px;
		}
	}
</style>